<template>
  <PublicPage bgColor="#FFFFFF">
  <view>
    <view class="flex items-center justify-between px-4 py-5">
      <view class="flex items-center flex-grow">
        <image v-if="userInfo?.avatar" :src="userInfo.avatar" class="rounded-full w-14 h-14" />
        <image v-else :src="userInfo.sex === '1' ? GirlProfile : ManProfile" class="rounded-full w-14 h-14" />

        <view v-if="userInfo?.userId" class="pl-2">
          <view>
            <text class="font-bold fz-24">{{ userInfo?.nickName }}</text>
            <text class="pl-2">{{ userInfo?.deptName }}</text>
          </view>
          <view class="u-tips-color">{{ userInfo?.channelName ?? userInfo?.companyName }}</view>
        </view>
        <view v-else class="pl-2" @click="exitLogin">
          <view class="text-base font-bold u-tips-color">暂未登录</view>
          <view class="u-tips-color">点击立即前往登录</view>
        </view>
      </view>

      <view class="flex-shrink-0 pl-3">
        <i class="iconfont u-tips-color">&#xe60d;</i>
      </view>      
    </view>
    <view class="grid grid-cols-4 p-3 bg-white">
      <view class="relative flex flex-col items-center justify-center" @click="openShareCode">
        <image src="@/static/image/icon/icon_my1.png" class="block w-16 h-16" />
        <view>公众号</view>

        <view class="posStatus">
          <up-tag v-if="userInfo?.mpOpenid" text="已绑" shape="circle"></up-tag>
          <up-tag v-else text="未绑" type="warning" shape="circle"></up-tag>
        </view>
      </view>
      <view class="flex flex-col items-center justify-center" @click="editPassword">
        <image src="@/static/image/icon/icon_my2.png" class="block w-16 h-16" />
        <view>修改密码</view>
      </view>
      <view class="flex flex-col items-center justify-center" @click="exitLogin">
        <image src="@/static/image/icon/icon_my3.png" class="block w-16 h-16" />
        <view>退出登录</view>
      </view>
      <view class="flex flex-col items-center justify-center" @click="callPhone('service')">
        <image src="@/static/image/icon/icon_my4.png" class="block w-16 h-16" />
        <view>我的客服</view>
      </view>
    </view>
  </view>

  <ShareCode ref="ShareCode" />
</PublicPage>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import ShareCode from "@/components/shareCode.vue";
import { callPhone } from '@/utils'
import ManProfile from '@/static/image/img/manProfile.png'
import GirlProfile from '@/static/image/img/girlProfile.png'

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

onLoad(() => {
  if(userInfo.value?.userId){
    userStore.getUserInfo()
  }
})

const _that = getCurrentInstance();
const openShareCode = () => {
  (_that?.refs.ShareCode as any).open();
}

//  修改密码
const editPassword = () => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/login/password'
  })
}

// 退出登录
const exitLogin = () => {
  userStore.logOut();
}
</script>

<style lang="scss" scoped>
.posStatus{
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}
</style>